<template>
    <el-row :gutter="12" >
        <el-col :span="8"  style="height: 200px;">
            <el-card shadow="hover" :body-style ="{height: '200px'}" @click.native="open">
                <h3 class="small">个人随笔</h3>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card shadow="hover" :body-style ="{height: '200px'}" @click.native="open">
                <h3 class="small">常用工具</h3>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card shadow="hover" :body-style ="{height: '200px'}" @click.native="open">
                <h3 class="small">工具安装包</h3>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    import {mapGetters } from 'vuex'

    export default {
        methods: {
            open() {
                this.$message({
                    //message: this.$store.getters.userInfo.name,
                    message: this.messageContent,
                    type: 'warning'
                });
            },
            startHacking () {
                this.$notify({
                    title: 'It works!',
                    type: 'success',
                    message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
                    duration: 5000
                })
            }
        },
        data() {
            return{

            }
        },
        computed: {
            ...mapGetters("home", {messageContent: "initInfo"})
        }
    }
</script>

<style scoped>
    .el-card h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }
</style>
